<template>
  <div class="newVs">
    <div class="mask"></div>
    <div class="new_vs">
      <div class="vs-top">
        <p>{{ title }}资料</p>
        <i class="el-icon-close" @click="closeNewClerk"></i>
      </div>
      <div class="vs-info">
        <div class="info">
          <p>退货日期</p>
          <el-date-picker
            v-model="outTime"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <p>退货序号</p>
          <el-input v-model="outSequence" disabled></el-input>
          <p>店铺</p>
          <el-input
            v-model="directSaleNo"
            style="width: 90px; margin-right: 10px"
            disabled
          ></el-input>
          <el-input
            v-model="directSaleName"
            style="width: 100px"
            disabled
          ></el-input>
          <!-- <div class="inp">
            <el-input style="width:60px;margin-right:10px;" v-model="directSaleNo" @blur="Change2"></el-input>
            <el-select v-model="directSaleName" @change="Change1">
              <el-option
                v-for="item in customerList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <p>实收单价</p>
          <el-checkbox v-model="isPaidOnePrice" border></el-checkbox>
          <el-input
            v-model="onePrice"
            style="width: 113px; margin-left: 10px"
            :disabled="!isPaidOnePrice"
          ></el-input>
        </div>
        <div class="info">
          <p>备注</p>
          <el-input v-model="remark" style="width: 416px"></el-input>
        </div>

        <!-- <el-table border :data="codeData" class="tb-edit" style="width: 100%;margin-bottom:15px" max-height="148px" @cell-click="cellClick" :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" :cell-style="{padding:0,height:'36px'}">
          <el-table-column :label="header" width="150"></el-table-column>
          <el-table-column prop="colorName" label="颜色" width="100"></el-table-column>
          <template v-for="i in sizeList">
            <el-table-column :prop="i" :label="i" :key="i+Math.random()">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row[i]" @blur="handleInputBlurResult($event,{index:scope.$index,key:i,result:scope.row[i]})" @keyup.enter.native="inpEnter"></el-input>
                <span>{{scope.row[i]}}</span></template>
            </el-table-column>
          </template>
        </el-table> -->

        <el-table
          border
          :data="codeData"
          id="codeTable"
          style="width: 100%; margin-bottom: 20px"
          max-height="148px"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column :label="header"> </el-table-column>
          <el-table-column prop="colorName" label="颜色"> </el-table-column>
          <template v-for="col in sizeList">
            <el-table-column
              :key="col + Math.random()"
              :prop="col"
              :label="col"
            >
              <template slot-scope="scope">
                <el-input
                  size="small"
                  class="innerInp"
                  v-model="scope.row[col]"
                  @blur="
                    handleClick($event, {
                      index: scope.$index,
                      key: col,
                      result: scope.row[col]
                    })
                  "
                  @keyup.enter.native="inpEnter"
                >
                </el-input>
              </template>
            </el-table-column>
          </template>
        </el-table>

        <div class="barcode">
          <p>条码扫描</p>
          <el-switch
            v-model="isBarcode"
            active-color="#409EFF"
            inactive-color="#C0C4CC"
          ></el-switch>
          <p style="margin-left: 15px">直退公司</p>
          <el-checkbox v-model="isCompany" :disabled="Dis4"></el-checkbox>
        </div>

        <div class="enterBarcode">
          <el-input
            id="input"
            ref="barcodeInput"
            v-model="barcode"
            placeholder="扫描/输入货号或款号，输完按回车"
            @keyup.enter.native="barcodeEnter($event)"
          ></el-input>
          <p style="margin: 15px 0 0 5px">合计：{{ howMany }}</p>
        </div>

        <el-table
          height="210px"
          :data="barcodeData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column
            prop="kindsNumber"
            label="款号"
            width="150"
          ></el-table-column>
          <el-table-column prop="colorName" label="颜色"></el-table-column>
          <el-table-column prop="size" label="尺码编号"></el-table-column>

          <el-table-column prop="number" label="数量" width="100" v-if="!Dis5">
            <template slot-scope="scope" v-if="!Dis5">
              <el-input
                class="tabinp"
                v-model="scope.row.number"
                @input="inp2"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量"
            width="100"
            v-if="Dis5"
          ></el-table-column>

          <el-table-column
            prop="sellingPrice"
            label="售价"
            width="100"
          ></el-table-column>

          <el-table-column prop="discount" label="折数" width="80" v-if="!Dis5">
            <template slot-scope="scope" v-if="!Dis5">
              <el-input
                class="tabinp"
                v-model="scope.row.discount"
                @input="inp"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="discount"
            label="折数"
            width="80"
            v-if="Dis5"
          ></el-table-column>

          <el-table-column
            prop="onePrice"
            label="单价"
            width="100"
            v-if="!Dis5"
          >
            <template slot-scope="scope" v-if="!Dis5">
              <el-input
                class="tabinp"
                v-model="scope.row.onePrice"
                @input="inp1"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="onePrice"
            label="单价"
            width="100"
            v-if="Dis5"
          ></el-table-column>

          <el-table-column
            prop="money"
            label="金额"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="commodityName"
            label="品名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="brandedName"
            label="品牌"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="enteringTime"
            label="录入时间"
            width="160"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>

      <div class="vs-btn">
        <el-button @click="closeNewClerk">关闭</el-button>
        <!-- <el-button @click="saveNew" plain type="primary">保存</el-button> -->
        <el-button @click="Edit" v-if="Dis" type="primary">修改</el-button>
        <!-- <el-button icon="el-icon-circle-check" @click="Confirm" v-if="Dis1">确认</el-button> -->
        <el-button @click="keepGoing" :disabled="Dis" type="primary"
          >继续录入</el-button
        >
      </div>

      <!-- F7弹出框 -->
      <div class="popup" :style="{ display: showPopup }">
        <div class="popup_t">
          <p>输入扫描数量</p>
          <i @click="closePopup" class="el-icon-close"></i>
        </div>
        <div class="popup_c">
          <p>请输入扫描数量</p>
          <p>如果不输入则扫描数量为1</p>
          <input
            type="text"
            class="popup_button"
            v-model="scanNum"
            @keyup.enter="
              () => {
                this.showPopup = 'none'
              }
            "
          />
        </div>
        <div class="popup_b">
          <el-button @click="closePopup">取消</el-button>
          <el-button
            type="primary"
            @click="
              () => {
                this.showPopup = 'none'
              }
            "
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderBuild, orderQuery } from '../../../../network/manufacturerOrder'
import { getKindsNumberList } from '../../../../network/artNo'
import { getBarCode } from '../../../../network/manufacturer'
import {
  GoodsNew,
  getShop,
  putGoods,
  returnConfirm
} from '../../../../network/shop'
import exportMethods from '../../../../components/mixins/exportMethods'
import today from '../../../../components/mixins/today'
import { getClient } from '../../../../network/client'
// import { delete } from 'vue/types/umd'
export default {
  mixins: [today],
  created() {
    //获取店铺编号
    getShop().then((res) => {
      console.log(res.data)
      this.directSaleNo = res.data.data.headquartersNo
      this.directSaleName = res.data.data.name
    })
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    detail: {
      type: Array,
      default: []
    },
    detail2: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      howMany: '',
      Dis5: true,
      // Dis1:false,
      Dis4: true,
      Dis: false,
      outSequence: '',
      customerList: [],
      isCompany: true,
      // 条码规律详情
      manufacturerBarCode: {},
      // 品牌公司
      brandedCompany: '',
      // 尺码
      knSize: '',
      knSizeList: [],

      showPopup: 'none',

      outTime: this.searchDateWithHour(),
      directSaleNo: '',
      outSequence: '',
      directSaleName: '',
      isPaidOnePrice: false,
      onePrice: '',
      remark: '',

      header: '',
      sizeList: [''],
      codeData: [],
      isBarcode: false,
      barcode: '',

      barcodeData: [],
      barcodeData1: [],
      tmpBarcodeData: [],

      tmpData: {},
      scanNum: 1,
      beforeScanNum: 1,
      sendList: [],
      // 新增
      requestDat: {}
    }
  },
  watch: {
    isPaidOnePrice(a, b) {
      if (!a) {
        this.onePrice = ''
      }
    },
    barcode(a, b) {
      if (a) {
        this.barcode = a.toUpperCase().trim()
      }
    },

    detail(a, b) {
      if (this.title != '新建') {
        this.outTime = a[0].outTime
        this.remark = a[0].remark
        this.outSequence = a[0].outSequence
        // this.isCompany = a.isCompany == 1 ? false : true
        // console.log(a)
        // console.log(this.isCompany)
        // for(let c of a){
        //   if(c.isCompany == 1){
        //     this.isCompany = true
        //   }else{
        //     this.isCompany = false
        //   }
        // }
      }
    },
    detail2(a, b) {
      if (this.title != '新建') {
        for (let w in a) {
          a[w]['number'] = a[w].sum
        }
        this.barcodeData = a
      }
    },
    title(a, b) {
      if (a == '新建') {
        this.Dis5 = true
        // this.Dis1 = true
        this.Dis = false
        this.clean()
        this.remark = ''
        this.outSequence = ''
        this.barcodeData = []
        this.outTime = this.searchDateWithHour()
      } else {
        // this.Dis1 = false
      }
      if (a == '编辑') {
        this.Dis5 = false
        this.Dis = true
        // this.Dis1 = false
      }
      if (a == '补单') {
        this.Dis5 = true
        // this.Dis1 = true
        this.Dis = false
      }
      if (a == '补单' && (this.barcodeData == '' || this.outSequence == '')) {
        this.closeNewClerk()
      }
    }
  },
  methods: {
    Confirm() {
      if (this.outSequence == '') {
        this.$message.warning({ message: '退货序号不能为空', offset: 400 })
        return
      }
      returnConfirm({ outSequence: this.outSequence }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message.success({ message: '确认成功', offset: 400 })
          this.$emit('sendXH', this.outSequence)
        }
      })
    },
    Edit() {
      if (this.title == '编辑') {
        // console.log(JSON.stringify(this.barcodeData))
        for (let i in this.barcodeData) {
          this.barcodeData[i]['remark'] = this.remark
          this.barcodeData[i]['outSequence'] = this.outSequence
          this.barcodeData[i].outTime = this.outTime
        }
        console.log(this.barcodeData)
        putGoods(JSON.stringify(this.barcodeData)).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            this.$emit('success1')
            this.$message.success({ message: '改单成功' })
          } else {
            this.$message.success({ message: '改单失败' })
          }
        })
      }
    },
    inp(row, index) {
      for (let a in this.barcodeData) {
        console.log(this.barcodeData[a].discount)
        this.barcodeData[a].onePrice =
          (Number(this.barcodeData[a].sellingPrice) *
            Number(this.barcodeData[a].discount)) /
          10
        this.barcodeData[a].money =
          Number(this.barcodeData[a].onePrice) *
          Number(this.barcodeData[a].number)
        // var tst = /^([0-9]|10)$/;
        // if(!tst.test(this.barcodeData[a].discount) && this.barcodeData[a].discount != ''){
        //   this.$message.warning({message:'折数为1-10之间',offset:400})
        //   // this.barcodeData[a].discount = 10
        //   return
        // }
      }
      var receivable = this.barcodeData.reduce((prev, next) => {
        //barcodeData数组里所有money的和
        return prev + next.money
      }, 0)
    },
    inp1() {
      for (let b in this.barcodeData) {
        this.barcodeData[b].discount =
          (Number(this.barcodeData[b].onePrice) /
            Number(this.barcodeData[b].sellingPrice)) *
          10
        this.barcodeData[b].money =
          this.barcodeData[b].onePrice * this.barcodeData[b].number
      }
    },
    inp2() {
      for (let c in this.barcodeData) {
        this.barcodeData[c].money =
          this.barcodeData[c].onePrice * this.barcodeData[c].number
      }
    },
    handleClick(e, { index, key, result }) {
      // e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
      // // let r = /^\+?[1-9][0-9]*$/
      // let r = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/
      // if (result != 0) {
      //   result = result.replace(/\b(0+)/gi,"")
      // }
      // if (!r.test(result) && result) {
      //   this.$alert('数量请输入整数', '', {
      //     confirmButtonText: '确定'
      //   })
      //   this.codeData[index][key] = 0
      //   return
      // }
      this.codeData[index][key] = result
    },

    closeNewClerk() {
      this.title = ''
      this.barcodeData = []
      this.outSequence = ''
      this.$emit('closeNew')
      this.howMany = ''
    },

    clean() {
      this.outSequence = ''
      this.header = ''
      this.commodityName = ''
      this.sellingPrice = ''
      this.remark = ''
      this.isBarcode = false
      this.barcode = ''
      this.codeData = []
      this.barcodeData = []
    },

    sibling(e) {
      let s = []
      let pp = e.parentNode.parentNode.children
      for (let j = 0; j < pp.length; j++) {
        let p = pp[j].children
        for (let i = 0, pl = p.length; i < pl; i++) {
          if (p[i] !== e) s.push(p[i])
        }
      }
      return s
    },
    // 输入货号后，颜色，尺码赋值
    csAssignment(str) {
      // 货号里提取色号，色号获取颜色
      // styleColor款色， 色尺colorSize
      let colorSize = str.slice(this.manufacturerBarCode.styleNumber).split('-')
      let tmpLen = 0
      if (this.manufacturerBarCode.styleColorSize) {
        // 型尺色

        if (this.manufacturerBarCode.styleColor) {
          // 款号与尺码之间有 -

          if (this.manufacturerBarCode.colorSize) {
            // 色号与尺码之间有 -        MCC-A0001-7-001   ["", "7", "001"]
            this.knSize = colorSize[1]
            this.colorNo = colorSize[2]
          } else {
            // 色号与尺码之间没有 -        MCC-A0001-7001    ["", "7001"]
            tmpLen = colorSize[1].length
            this.knSize = colorSize[1].slice(
              0,
              tmpLen - this.manufacturerBarCode.colorNumber
            )
            this.colorNo = colorSize[1].slice(
              tmpLen - this.manufacturerBarCode.colorNumber
            )
          }
        } else {
          // 款号与尺码之间没有 -

          if (this.manufacturerBarCode.colorSize) {
            // 色号与尺码之间有 -      MCC-A00017-001    ["7", "001"]
            this.knSize = colorSize[0]
            this.colorNo = colorSize[1]
          } else {
            // 色号与尺码之间没有 -     MCC-A00017001    ["7001"]
            tmpLen = colorSize[1].length
            this.knSize = colorSize[0].slice(
              0,
              tmpLen - this.manufacturerBarCode.colorNumber
            )
            this.colorNo = colorSize[0].slice(
              tmpLen - this.manufacturerBarCode.colorNumber
            )
          }
        }
      } else {
        // 型色尺

        if (this.manufacturerBarCode.styleColor) {
          // 款号与颜色之间有 -

          if (this.manufacturerBarCode.colorSize) {
            // 色号与尺码之间有 -     MCC-A0001-001-7   ["", "001", "7"]
            this.colorNo = colorSize[1]
            this.knSize = colorSize[2]
          } else {
            // 色号与尺码之间没有 -    MCC-A0001-0017   ["", "0017"]
            tmpLen = colorSize[1].length
            this.colorNo = colorSize[1].slice(
              0,
              this.manufacturerBarCode.colorNumber
            )
            this.knSize = colorSize[1].slice(
              this.manufacturerBarCode.colorNumber
            )
          }
        } else {
          // 款号与颜色之间没有 -

          if (this.manufacturerBarCode.colorSize) {
            // 色号与尺码之间有 -      MCC-A0001001-7      ["001", "7"]
            this.colorNo = colorSize[0]
            this.knSize = colorSize[1]
          } else {
            // 色号与尺码之间没有 -      MCC-A00010017     ["0017"]
            tmpLen = colorSize[1].length
            this.colorNo = colorSize[0].slice(
              0,
              this.manufacturerBarCode.colorNumber
            )
            this.knSize = colorSize[0].slice(
              this.manufacturerBarCode.colorNumber
            )
          }
        }
      }

      // 颜色
      getColorSeason({ no: this.colorNo, limit: 99999 }).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.colorName = res.data.data[0].name
        }
      })

      // 尺码
      getSize({ kind: this.manufacturerBarCode.sizeKindId, limit: 99999 }).then(
        (res) => {
          // console.log(res)
          if (res.data.code == 200) {
            let list = res.data.data
            for (const i of list) {
              if (i.size == this.knSize) {
                this.knSizeList = [i]
                break
              }
            }
          }
        }
      )
    },

    keepGoing() {
      // for(let a in this.barcodeData){
      //   this.barcodeData[a]['outTime'] = this.outTime.slice(0,10) + 'T00:00:00'
      //   this.barcodeData[a]['outSequence'] = this.outSequence
      //   this.barcodeData[a]['directSaleNo'] = this.directSaleNo
      //   this.barcodeData[a]['isCompany'] = this.isCompany == false ? 0 : 1
      //   this.barcodeData[a]['isPaidOnePrice'] = this.isPaidOnePrice == false ? 0 : 1
      //   this.barcodeData[a]['onePrice'] = this.onePrice
      //   this.barcodeData[a]['remark'] = this.remark
      //   this.barcodeData[a]['sum'] = this.barcodeData[a].sum
      //   delete this.barcodeData[a].colorName
      //   delete this.barcodeData[a].accessoryName
      //   delete this.barcodeData[a].brandedCompany
      //   delete this.barcodeData[a].colorNo
      //   delete this.barcodeData[a].commodityName
      //   delete this.barcodeData[a].commodityType
      //   delete this.barcodeData[a].costOne
      //   delete this.barcodeData[a].costTwo
      //   delete this.barcodeData[a].differentiateCondition
      //   delete this.barcodeData[a].generalizePrice
      //   delete this.barcodeData[a].id
      //   delete this.barcodeData[a].image
      //   delete this.barcodeData[a].manufacturerPrice
      //   delete this.barcodeData[a].manufacturerType
      //   delete this.barcodeData[a].matchStyle
      //   delete this.barcodeData[a].mnemonicCode
      //   delete this.barcodeData[a].newKindsNumber
      //   delete this.barcodeData[a].newSize
      //   delete this.barcodeData[a].originalKindsNumber
      //   delete this.barcodeData[a].originalManufacturerKindsNumber
      //   delete this.barcodeData[a].quarter
      //   delete this.barcodeData[a].relevanceSize
      //   delete this.barcodeData[a].sellingPrice
      //   delete this.barcodeData[a].sellingPriceFour
      //   delete this.barcodeData[a].sellingPriceOne
      //   delete this.barcodeData[a].sellingPriceThree
      //   delete this.barcodeData[a].sellingPriceTwo
      //   delete this.barcodeData[a].size
      //   delete this.barcodeData[a].sizeKind
      //   delete this.barcodeData[a].sizeNo
      //   delete this.barcodeData[a].softwareCustomerId
      //   delete this.barcodeData[a].splitNumber
      //   delete this.barcodeData[a].statistics
      //   delete this.barcodeData[a].status
      //   delete this.barcodeData[a].sum
      //   delete this.barcodeData[a].supplier
      //   delete this.barcodeData[a].vipPrice
      //   delete this.barcodeData[a].waveBand
      // }
      if (this.title == '新建' || this.title == '补单') {
        if (this.isBarcode) {
          this.saveKindSNum()
        } else {
          this.continueInput()
        }
      }
    },
    // 保存
    // saveNew(){
    //   if (!this.inputDate1) {
    //     this.$alert('订货日期不能为空', '', {
    //       confirmButtonText: '确定'
    //     })
    //     return
    //   }
    //   if (!this.inputDate2) {
    //     this.$alert('预交日期不能为空', '', {
    //       confirmButtonText: '确定'
    //     })
    //     return
    //   }
    //   if (!this.manufacturer) {
    //     this.$alert('厂商不能为空', '', {
    //       confirmButtonText: '确定'
    //     })
    //     return
    //   }

    //   // 补单新增的货号放在kindsNumberNumberMap
    //   // 原有货号不管有没有修改数量，都将原来数据放在kindsNumberMap

    //   let kindsNumberNumberMap = {}

    //   let rfidList = []
    //   this.barcodeData.forEach(e => {
    //     kindsNumberNumberMap[e.kindsNumber] = Number(e.sum)
    //   })

    //   let d = {
    //     orderTime: this.inputDate1,
    //     prepayTime: this.inputDate2,
    //     orderSalesSequence : this.odd,
    //     manufacturerNo: this.manufacturer,
    //     sequence : this.inputSequence,
    //     remark: this.remark,
    //     isAppend: this.additional ? 1 : 0,
    //     kindsNumberMap: kindsNumberNumberMap
    //   }
    //   if (this.inputSequence) {
    //     d.enteringTime = this.searchDateWithHour()
    //   }

    //   console.log(d)
    //   // return
    //   orderBuild(JSON.stringify(d)).then(res => {
    //     console.log(res)
    //     if (res.data.code == 200) {
    //       this.$message({
    //         message: '保存成功',
    //         type: 'success'
    //       })
    //       let send = {}
    //       send.inputDate1 = this.inputDate1
    //       send.inputDate2 = this.inputDate2
    //       send.manufacturer = this.manufacturer
    //       send.sequence = res.data.data.sequence
    //       // 发送到父组件数据
    //       this.$emit('saveNew', send)

    //       if (res.data.data.errorDate && res.data.data.errorDate.length) {
    //         // 导出一个txt文本
    //         // console.log(String(res.data.data.errorDate))
    //         this.exportRaw(String(res.data.data.errorDate),'errorDate.txt')
    //       }
    //       this.closeNewClerk()
    //     } else {
    //       this.$message.error('保存失败')
    //     }
    //   })
    // },
    // 继续录入
    continueInput() {
      this.commodityName = ''
      this.sellingPrice = ''

      // 之前输入货号录入1条
      if (JSON.stringify(this.tmpData) != '{}') {
        // console.log(this.tmpData)
        // console.log(this.barcodeData.length)
        if (!this.barcodeData.length) {
          this.barcodeData.push(this.tmpData)
          this.tmpData = {}
        } else {
          for (const i of this.barcodeData) {
            if (i.kindsNumber == this.tmpData.kindsNumber) {
              i.sum = Number(i.sum) + Number(this.tmpData.sum)
              this.tmpData = {}
              // this.$forceUpdate()
              return
            }
          }
          this.barcodeData.push(this.tmpData)
          this.tmpData = {}
        }
        this.barcode = ''
        return
      }

      // 之前输入款号录入多条
      // console.log(this.codeData, '之前输入款号录入多条')
      let knList = []
      this.codeData.forEach((e) => {
        let c = e.colorNo
        this.sizeList.forEach((f) => {
          if (this.manufacturerBarCode.styleColorSize) {
            // 型尺色

            if (this.manufacturerBarCode.styleColor) {
              // 款号与尺码之间有 -

              if (this.manufacturerBarCode.colorSize) {
                // 色号与尺码之间有 -
                knList.push({
                  kindsNumber: `${this.header}-${f}-${c}`,
                  sum: e[f]
                })
              } else {
                // 色号与尺码之间没有 -
                knList.push({
                  kindsNumber: `${this.header}-${f}${c}`,
                  sum: e[f]
                })
              }
            } else {
              // 款号与尺码之间没有 -

              if (this.manufacturerBarCode.colorSize) {
                // 色号与尺码之间有 -
                knList.push({
                  kindsNumber: `${this.header}${f}-${c}`,
                  sum: e[f]
                })
              } else {
                // 色号与尺码之间没有 -
                knList.push({
                  kindsNumber: `${this.header}${f}${c}`,
                  sum: e[f]
                })
              }
            }
          } else {
            // 型色尺

            if (this.manufacturerBarCode.styleColor) {
              // 款号与颜色之间有 -

              if (this.manufacturerBarCode.colorSize) {
                // 色号与尺码之间有 -
                knList.push({
                  kindsNumber: `${this.header}-${c}-${f}`,
                  sum: e[f]
                })
              } else {
                // 色号与尺码之间没有 -
                knList.push({
                  kindsNumber: `${this.header}-${c}${f}`,
                  sum: e[f]
                })
              }
            } else {
              // 款号与颜色之间没有 -

              if (this.manufacturerBarCode.colorSize) {
                // 色号与尺码之间有 -
                knList.push({
                  kindsNumber: `${this.header}${c}-${f}`,
                  sum: e[f]
                })
              } else {
                // 色号与尺码之间没有 -
                knList.push({
                  kindsNumber: `${this.header}${c}${f}`,
                  sum: e[f]
                })
              }
            }
          }
        })
      })
      // console.log(knList)

      for (const k of knList) {
        for (const l of this.tmpBarcodeData) {
          if (k.kindsNumber == l.kindsNumber) {
            l.sum = k.sum
          }
        }
      }
      let isExist = 0
      this.barcodeData1 = []
      for (const g of this.tmpBarcodeData) {
        // if (!Number(g.sum)) continue
        if (g.sum != '') {
          this.barcodeData1.push(g)
        }

        this.sendList = []
        this.barcodeData1.forEach((e) => {
          this.sendList.push({ kindsNumber: e.kindsNumber, number: e.sum })
        })

        // this.$forceUpdate()
      }
      if (this.title == '新建') {
        if (!this.sendList.length)
          return this.$message.error('请输入货号或款号,并按回车')
        for (let p in this.sendList) {
          this.sendList[p]['outTime'] = this.outTime.slice(0, 10) + 'T00:00:00'
          this.sendList[p]['outSequence'] = this.outSequence
          this.sendList[p]['directSaleNo'] = this.directSaleNo
          this.sendList[p]['isPaidOnePrice'] =
            this.isPaidOnePrice == false ? 0 : 1
          this.sendList[p]['onePrice'] = this.onePrice
          this.sendList[p]['remark'] = this.remark
          this.sendList[p]['isCompany'] = this.isCompany == false ? 0 : 1
        }
        console.log(this.sendList, 'this.sendList')
        GoodsNew(JSON.stringify(this.sendList)).then((res) => {
          if (res.data.code == 200) {
            this.$message.success({ message: '保存成功' })
            this.barcodeData = res.data.data
            this.$emit('success1', this.barcodeData)
            for (let v of res.data.data) {
              this.outSequence = v.outSequence
              // this.outSequence = v.outSequence
            }
            // 新增代码
            this.sizeList = ['']
            this.sendList = []
            this.codeData = []
            this.barcodeData1 = []
            this.tmpBarcodeData = []

            this.tmpData = {}
            this.howMany = this.barcodeData.reduce((prev, next) => {
              return prev + next.number
            }, 0)
          }
        })
      }
      if (this.title == '补单') {
        if (!this.sendList.length)
          return this.$message.error('请输入货号或款号,并按回车')
        for (let p in this.sendList) {
          this.sendList[p]['outTime'] = this.outTime.slice(0, 10) + 'T00:00:00'
          this.sendList[p]['outSequence'] = this.outSequence
          this.sendList[p]['directSaleNo'] = this.directSaleNo
          this.sendList[p]['isPaidOnePrice'] =
            this.isPaidOnePrice == false ? 0 : 1
          this.sendList[p]['onePrice'] = this.onePrice
          this.sendList[p]['remark'] = this.remark
          this.sendList[p]['isCompany'] = this.isCompany == false ? 0 : 1
          this.sendList[p]['isMakeUp'] = 1
        }
        console.log(this.sendList)
        GoodsNew(JSON.stringify(this.sendList)).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            this.$message.success({ message: '补单成功' })
            this.barcodeData = res.data.data
            this.$emit('success1', this.barcodeData)
            for (let v of res.data.data) {
              this.outSequence = v.outSequence
              // this.outSequence = v.outSequence
            }
            this.sizeList = ['']
            this.sendList = []
            this.codeData = []
            this.barcodeData1 = []
            this.tmpBarcodeData = []

            this.tmpData = {}
            this.howMany = this.barcodeData.reduce((prev, next) => {
              return prev + next.number
            }, 0)
          }
        })
      }
      this.barcode = ''
      this.header = ''
      this.codeData = []
    },

    // 输入货号保存
    saveKindSNum() {
      let obj = {
        outTime: this.outTime.slice(0, 10) + 'T00:00:00',
        outSequence: this.outSequence,
        directSaleNo: this.directSaleNo,
        isPaidOnePrice: this.isPaidOnePrice == false ? 0 : 1,
        onePrice: this.onePrice,
        remark: this.remark,
        isCompany: this.isCompany == false ? 0 : 1,
        kindsNumber: this.barcode,
        number: this.scanNum
      }
      GoodsNew(JSON.stringify([obj])).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$emit('success1')
          this.$message.success({ message: '保存成功' })
          this.barcodeData = res.data.data
          for (let f of res.data.data) {
            this.outSequence = f.outSequence
            // this.outSequence = f.outSequence
          }
          this.howMany = this.barcodeData.reduce((prev, next) => {
            return prev + next.number
          }, 0)
          this.barcode = ''
          obj = {}
          document.getElementById('input').focus()
        }
      })
    },

    // 扫描/输入货号或款号
    barcodeEnter(e) {
      if (this.barcode) {
        if (this.isBarcode) {
          // 扫描货号
          // getKindsNumberList({kindsNumberStr: this.barcode}).then(res => {
          //   console.log(res)
          //   if (res.data.code == 200) {
          //     this.commodityName = res.data.data.data[0].commodityName
          //     this.sellingPrice = res.data.data.data[0].sellingPrice
          //     this.tmpData = res.data.data.data[0]
          //     this.tmpData.sum = this.scanNum
          //     this.tmpData.onePrice = this.tmpData.discount / 10 * this.tmpData.sellingPrice
          //     this.$refs.barcodeInput.focus()
          //     // this.continueInput()
          //   }
          // })
          this.saveKindSNum()
        } else {
          // 手输款号
          getKindsNumberList({ kindsNumberStr: this.barcode }).then((res) => {
            this.XHList = res.data.data.data
            console.log(this.XHList)
            if (res.data.data.data.length) {
              this.header = res.data.data.data[0].styleNumber
              this.$emit('inpNumChange')
              // 品牌公司查条码规律详情
              getBarCode({
                company: res.data.data.data[0].brandedCompany
              }).then((res) => {
                // console.log(res)
                this.manufacturerBarCode = res.data.data[0]
              })
              // console.log(this.manufacturerBarCode)
              // 输入款号显示中间表和尺码信息   ZZZ-AAS
              res.data.data.data.sort((a, b) => {
                return a.relevanceSize.localeCompare(b.relevanceSize)
              })
              let tmp = res.data.data.data
              this.tmpBarcodeData = tmp
              // console.log(tmp)

              // 中间表  尺码表头
              this.sizeList = [tmp[0].size]
              let isExistSize = 0
              for (const i of tmp) {
                for (const j of this.sizeList) {
                  if (j == i.size) {
                    isExistSize = 0
                    break
                  }
                  isExistSize = 1
                }
                if (isExistSize) {
                  this.sizeList.push(i.size)
                  // console.log(this.sizeList)
                }
              }

              // 中间表
              let tmpCodeData = [
                { colorNo: tmp[0].colorNo, colorName: tmp[0].colorName }
              ]
              let isExistColor = 0
              for (const i of tmp) {
                for (const j of tmpCodeData) {
                  if (j.colorName == i.colorName) {
                    isExistColor = 0
                    break
                  }
                  isExistColor = 1
                }
                if (isExistColor) {
                  tmpCodeData.push({
                    colorNo: i.colorNo,
                    colorName: i.colorName
                  })
                }
              }
              tmpCodeData.forEach((e) => {
                this.sizeList.forEach((f) => {
                  e[f] = ''
                })
              })
              this.codeData = tmpCodeData
              let codeTable = document.getElementById('codeTable')
              let inputs = codeTable.getElementsByTagName('input')
              // console.log(inputs)
              let int = setInterval(() => {
                clearInterval(int)
                inputs[0].focus()
                inputs[inputs.length - 1].onkeyup = (e) => {
                  if (window.event.keyCode == 13) {
                    this.continueInput()
                    // inputs[inputs.length - 1].onkeyup = () => {}
                  }
                }
              }, 100)
            } else {
              this.$message('此货号/款号无数据')
              // this.$refs.barcodeInput.focus()
            }
          })
        }
      }
    },

    closePopup() {
      this.showPopup = 'none'
      this.scanNum = this.beforeScanNum
    },

    //  输入回车/失去焦点统计
    //  index 行索引
    //  result 输入内容
    handleInputBlurResult(e, { index, key, result }) {
      e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
      let r = /^\+?[1-9][0-9]*$/
      if (result != 0) {
        result = result.replace(/\b(0+)/gi, '')
      }
      if (!r.test(result) && result) {
        this.$alert('数量请输入正整数', '', {
          confirmButtonText: '确定'
        })
        this.codeData[index][key] = 0
        return
      }
      this.codeData[index][key] = result
    },
    cellClick(row, column, cell, event) {
      cell.classList.add('activeCell')
      let s = this.sibling(cell)
      // console.log(s)
      s.forEach((e) => {
        e.classList.remove('activeCell')
      })
    },
    inpEnter(e) {
      e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
    }
  },
  mounted() {
    let _this = this
    document.onkeydown = function (event) {
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if (e && e.keyCode == 118) {
        // 按 F7
        // console.log('an f7')
        if (_this.showPopup == 'none') {
          _this.beforeScanNum = _this.scanNum
          _this.showPopup = 'block'
        } else {
          _this.showPopup = 'none'
        }
      }
    }
  }
}
</script>

<style scoped>
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 1320px;
  max-height: 800px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.new_vs .vs-top {
  height: 40px;
  background-color: #f8f8f8;
  margin-bottom: 10px;
}
.new_vs .vs-top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
  font-weight: 700;
}
.new_vs .vs-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}

.new_vs input {
  height: 30px;
  border: solid 1px #dcdfe6;
  border-radius: 5px;
  margin-left: 10px;
}
.new_vs input:focus {
  outline: none;
  border: solid 1px #409eff;
}

.vs-info {
  padding: 0 20px;
}
.vs-info .info {
  height: 30px;
  margin-bottom: 10px;
}
.vs-info p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}
.colorBox,
.infoBox {
  display: inline;
}

.enterBarcode {
  display: flex;
  height: 60px;
  background-color: #f2f2f2;
  margin: 15px 0;
}

.vs-btn {
  float: right;
  margin: 15px 15px;
}

.popup {
  width: 400px;
  height: 200px;
  border: 2px solid #f4f4f4;
  box-shadow: 0 2px 2px 2px #dbdbdb;
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -200px;
  background: white;
  display: block;
}
.popup_t {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgb(244, 244, 244);
  padding: 8px 15px;
}
.popup_t p {
  font-weight: 700;
}
.popup_c {
  padding: 8px 15px;
}
.popup_button {
  margin: 5px 0 0 0;
  width: 94%;
  height: 30px;
  padding: 0 10px;
  border: 2px solid #f4f4f4;
  border-radius: 3px;
}
.popup_b {
  margin: 10px 0 0 0;
  padding-left: 230px;
}
.info {
  display: flex;
}
.inp {
  display: flex;
}
</style>

<style>
.new_vs .info .el-input,
.new_vs .info .el-select {
  width: 160px;
}
.new_vs .el-input__inner {
  height: 30px !important;
}
.new_vs .el-input__icon {
  line-height: 30px !important;
}
.vs-info .barcode .el-switch {
  margin: 0 !important;
}

.new_vs .enterBarcode .el-input {
  width: 486px;
  margin: 14px 17px;
}

.new_vs .colorBox .el-input {
  width: 60px;
  margin-right: 10px;
}
.new_vs .colorBox .el-input--suffix {
  width: 90px;
}
</style>
